<template>
  <div class="box">
    <!-- 查询项目 -->
    <div class="selectBox">
      <div style="display:flex;justify-content: space-between;padding:0 20px">
        <el-form ref="queryInfo" size="mini" :model="queryInfo" inline>
          <el-form-item label>
            <el-input
              style="width:150px"
              clearable
              @input="
                queryInfo.bollardNo = verifyfilter('char', queryInfo.bollardNo)
              "
              @keyup.enter.native="getBittInfo"
              placeholder="缆桩名称"
              v-model="queryInfo.bollardNo"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <!-- 查询按钮 -->
            <el-button type="primary" icon="el-icon-search" @click="getBittInfo">查询</el-button>
          </el-form-item>
        </el-form>
        <div>
          <!-- 新增按钮 -->
          <el-button size="mini" icon="el-icon-plus" v-if="menuArr.includes('缆桩新增') || true" @click="addBitt"></el-button>
        </div>
      </div>
    </div>
    <!-- 缆桩信息渲染 -->

    <BaseTable
      :data="cargotableData"
      :columns="cargotableDataColumns"
      :tableHeight="tableHeight + 60"
      :pagination="false"
    ></BaseTable>

    <!-- 分页区域 -->
    <div class="page">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryall.startpage"
        :page-sizes="[10, 15, 20, 25, 30]"
        :page-size="queryall.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum"
      ></el-pagination>
    </div>
    <!-- 新增缆桩信息的弹出框 -->
    <el-drawer
      :title="flag ? '新增缆桩信息' : '编辑缆桩信息'"
      :visible.sync="addDialogVisible"
      size="35%"
      :before-close="handleCloseBefore"
      :append-to-body="true"
    >
        <el-form ref="addForm" :model="addForm" :rules="addFormRule" label-width="120px" size="small" style="padding:10px 20px">
          <el-form-item label="缆桩编号" prop="bollardNo">
            <el-input v-model="addForm.bollardNo" @input="change('char#')"></el-input>
          </el-form-item>
          <el-form-item label="所属泊位" prop="berthNo">
            <el-input disabled v-model="addForm.berthNo"></el-input>
          </el-form-item>
          <el-form-item label="经度" prop>
            <el-input v-model="addForm.longitude" @input="change('num')"></el-input>
          </el-form-item>
          <el-form-item label="纬度" prop>
            <el-input v-model="addForm.latitude" @input="change('num')"></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="sortNum">
            <el-input  @input="addForm.sortNum = verifyfilter('number', addForm.sortNum)" v-model="addForm.sortNum"></el-input>
          </el-form-item>
        </el-form>
        <span class="demo-drawer__footer">
          <!-- 确认 -->
          <el-button size="small" type="primary" @click="addUpdate">保 存</el-button>
        </span>
    </el-drawer>
  </div>
</template>

<script>
import { isObjectValueEqual } from '@/libs/date'
import BaseTable from '@/components/BaseTable'
import api from '@/api/Basic/metadataBerth'
export default {
  name: 'metabittInfoList',
  components: {
    BaseTable
  },
  data() {
    return {
      cargotableDataColumns: [
        { prop: 'bollardNo', label: '榄桩编号' },
        { prop: 'berthNo', label: '所属泊位' },
        { prop: 'longitude', label: '经度' },
        { prop: 'latitude', label: '纬度' },
        { prop: 'createName', label: '创建人' },
        { prop: 'createdTime', label: '创建时间' },
        {
          label: '操作',
          align: 'center',
          fixed: 'right',
          width: 140,
          render: (h, params) => {
            return h(
              'div',
              {
                class: 'btnClass'
              },
              [
                h('el-button', {
                  props: {
                    size: 'mini'
                  },
                  domProps: {
                    innerHTML: ` <span style='color:#0B6CD6;display: ${this.menuArr.includes('缆桩编辑') ? 'block' : 'none'}'><i class='iconfont icon-1-07'></i><span  style='padding-left:5px;'>编辑</span></span>`
                  },
                  on: {
                    click: () => {
                      this.handleEdit(params.$index, params.row)
                    }
                  }
                }),
                h('el-button', {
                  props: {
                    size: 'mini'
                  },

                  domProps: {
                    innerHTML: `<span style='color:#0B6CD6;display: ${this.menuArr.includes('缆桩删除') ? 'block' : 'none'}'><i class='iconfont icon-1-07'></i><span  style='padding-left:5px;'>删除</span></span>`
                  },
                  on: {
                    click: () => {
                      this.del(params.$index, params.row)
                    }
                  }
                })
              ]
            )
          }
        }
      ],
      cargotableData: [],
      bittTableData: [],
      queryall: {
        startpage: 1,
        pagesize: 10
      },
      berthNooptions: [],
      // 当前页码
      addForm: {
        bollardNo: '',
        berthNo: this.P_berthNo,
        longitude: '',
        latitude: '',
        sortNum: '',
        delFlag: '0'
      },
      addDialogVisible: false,
      flag: false,

      totalNum: 0,
      // 批量删除
      flagHint: false,
      addFormRule: {
        bollardNo: [
          { required: true, message: '缆桩编号不能为空', trigger: 'blur' }
        ],
        longitude: [
          { max: 8, message: '长度最大 8 个字符', trigger: 'blur' }
        ],
        latitude: [
          { max: 8, message: '长度最大 8 个字符', trigger: 'blur' }
        ],
        sortNum: [
          {
            required: true,
            message: '请输入排序号',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  props: ['senData', 'queryInfo', 'P_berthNo', 'tableHeight', 'menuArr'],
  watch: {
    // 监听变化 senData
    senData() {
      this.getBittInfo()
    },
    addForm: {
      handler(newVal, oldVal) {
        console.log(isObjectValueEqual(newVal, oldVal))
        this.flagHint = isObjectValueEqual(newVal, oldVal)
      },
      deep: true
    }
  },
  mounted() {
    this.addForm.berthNo = this.P_berthNo

    this.getBittInfo()
  },
  methods: {
    // 删除
    async del(index, row) {
      console.log(row)
      const confirmRes = await this.$confirm(
        '此操作将永久删除该数据, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => {})
      if (confirmRes !== 'confirm') {
        return this.$message.info('已经取消删除')
      }
      this.deleteRecieptById(row.id)
    },
    // 删除
    async deleteRecieptById(id) {
      const res = await api.reqDeleteBitt(id)
      this.$notify.success({
        title: '温馨提示',
        message: '删除成功！'
      });
      this.getBittInfo()
    },
    handleCloseBefore(done) {
      if (this.flagHint) {
        this.$confirm('您已修改了数据，确定是否关闭？')
          .then(_ => {
            done()
            this.addForm = { shortName: '' }

            this.$refs.addForm.resetFields()
          })
          .catch(_ => {})
      } else {
        done()
      }
    },
    change(z) {
      this.$forceUpdate()
      if (z === 'num') {
        if (this.addForm.longitude) {
          this.addForm.longitude = this.verifyfilter(
            'digit',
            this.addForm.longitude
          )
        }
        if (this.addForm.latitude) {
          this.addForm.latitude = this.verifyfilter(
            'digit',
            this.addForm.latitude
          )
        }
      } else if (z === 'char') {
        if (this.addForm.bollardNo) {
          this.addForm.bollardNo = this.verifyfilter(
            'char',
            this.addForm.bollardNo
          )
        }
        if (this.addForm.bollardNo) {
          this.addForm.bollardNo = this.verifyfilter(
            'char',
            this.addForm.bollardNo
          )
        }
      } else if (z === 'zimu') {
        this.addForm.shortName = this.verifyfilter(
          'latin',
          this.addForm.shortName
        )
      }
    },
    // 新增缆桩
    addBitt() {
      this.addDialogVisible = true
      this.flag = true
      this.flagHint = false
      console.log(this.P_berthNo)
      this.addForm = {
        bollardNo: '',
        berthNo: this.P_berthNo,
        longitude: '',
        latitude: '',
        sortNum: '',
        delFlag: '0'
      }
    },
    // 编辑缆桩信息
    handleEdit(index, info) {
      this.addDialogVisible = true
      this.addForm = JSON.parse(JSON.stringify(info))
      delete this.addForm.createBy
      delete this.addForm.createName
      delete this.addForm.createTime
      delete this.addForm.updateTime
      delete this.addForm.updateName
      delete this.addForm.berthLength
      delete this.addForm.index
      this.addForm.berthNo = this.senData.berthNo
      this.flag = false
    },

    // 每页显示的条数
    handleSizeChange(val) {
      this.queryall.pagesize = val
      this.getBittInfo()
    },
    // 当前页
    handleCurrentChange(val) {
      this.queryall.startpage = val
      this.getBittInfo()
    },

    async getBittInfo() {
      var params = {
        startpage: this.queryall.startpage,
        pagesize: this.queryall.pagesize,
        bollardNo: this.queryInfo.bollardNo,
        berthId: this.senData.id
      }
      await api.reqGetBitt(params).then(res => {
        this.cargotableData = res.data.data.pages
        this.queryall.startpage = res.data.data.pageNum
        this.queryall.pagesize = res.data.data.pageSize
        this.totalNum = res.data.data.totalNum
      }).catch(error => {});
    },
    // 编辑新增
    async addUpdate() {
      // delete this.addForm.berthNo
      this.addForm.berthId = this.senData.id // 关联泊位
      this.$refs['addForm'].validate(async valid => {
        if (valid) {
          if (this.flag) {
            const data = {}
            await api.reqPostAddBitt(this.addForm).then(res => {
              this.$message.success(res.data.msg)
              this.addDialogVisible = false
              this.getBittInfo()
            }).catch(error => {});
          } else {
            // 进行修改操作
            await api.reqPutUpdateBitt(this.addForm).then(res => {
              this.$message.success(res.data.msg)
              this.addDialogVisible = false
              this.getBittInfo()
            }).catch(error => {});
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-button--primary {
  background-color: #338ce8;
  border-color: #338ce8;
}
.box /deep/ .v-modal {
  z-index: 11 !important;
  display: none !important;
}
/deep/ .el-drawer__header {
  margin-bottom: 12px;
  padding: 8px 20px 0;
}
.page {
  background: #ffffff;
  margin-top: 4px;
  border-radius: 4px 4px 0 0;
  line-height: 35px;
  padding-right: 1rem;
}
.box {
  background: #ffffff;
  border: 1px solid #e1e4eb;
  border-radius: 4px 4px 0 0;
  border-top: none;
}
.title {
  background: #f5f7fa;
  height: 40px;
  line-height: 40px;
  p {
    font-family: MicrosoftYaHei;
    font-size: 16px;
    color: #303133;
    letter-spacing: 0;
    line-height: 16px;
    padding-left: 14px;
    line-height: 40px;
  }
}

/deep/ .el-table .cell {
  white-space: nowrap;
}
/deep/ .el-form-item--mini .el-form-item__label {
  line-height: 0;
}
/deep/ .el-pagination {
  text-align: right;
}
/deep/ .el-table th > .cell {
  font-family: PingFangSC-Semibold;
  font-size: 14px;
  color: #606266;
}
/deep/ .el-table .el-button:focus,
.el-button:hover {
  background-color: #fff;
  color: #338ce8;
  border: 1px solid #e1e4eb;
}
/deep/ .el-table .el-button--mini {
  color: #1684f6;
  border-color: transparent;
  background: transparent;
}
/deep/ .el-table th {
  border-left: 1px solid #ebeef5;
}
/deep/ .el-table th:nth-child(1) {
  border-left: none;
}
/deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #f5f7fa;
}
/deep/.el-pagination.is-background .btn-next,
/deep/ .el-pagination.is-background .btn-prev,
/deep/ .el-pagination.is-background .el-pager li {
  background: #ffffff;
  border: 1px solid #e1e4eb;
  border-radius: 3px;
  border-radius: 3px;
}
/deep/ .el-select,
/deep/ .el-select > .el-input {
  width: 100%;
}

.selectBox {
  background: #ffffff;
  border: 1px solid #e1e4eb;
  border-bottom: 0;
  border-left: none;
  line-height: 28px;
  height: 50px;
  position: relative;
  display: flex;
  align-items: center;
}
.el-button {
  margin-left: 0px !important;
}
</style>
